import Taro from '@tarojs/taro';
import { View, Text, Image } from '@tarojs/components';
import { connect } from '@tarojs/redux';
import './index.scss';
import { Component } from 'nervjs';
import MySwiper from '../../components/MySwiper';

@connect(({home}) => ({
    ...home,
}))
export default class Index extends Component {

    componentDidMount() {
        this.props.dispatch({
            type: 'home/load',
        });
        this.props.dispatch({
            type: 'home/product',
        });
    }

    gotoDetail = (e) => {
        Taro.navigateTo({
            url: `/pages/detail/index?id=${e.currentTarget.dataset.id}`,
        })
    }

    render() {
        const { banner, brands, products_list, effects } = this.props;

        const clientWidth = document.documentElement.clientWidth;
        return (
            <View className="home-page">
                <MySwiper banner={banner} home />
                {
                    brands.map((item, index) => (
                        <View className="nav-wrap" key={index}>
                            {
                                item.images.map((img, i) => {
                                    const key = `${index}-${i}`;
                                    return <View className="nav-item" key={key}>
                                        <Image mode="widthFix" src={img.src}></Image>
                                    </View>
                                })
                            }
                        </View>
                    ))
                }
                {
                    products_list.map((product, index) => (
                        <View className="product-wrap" key={index}>
                            <Image mode="widthFix" src={product.title_image}></Image>
                            <View className="products">
                                <Image className="img" mode="widthFix" src={product.content_image}></Image>
                                {
                                    product.links.map((link, i) => {
                                        const key = `${index}-${i}`;
                                        
                                        const linkStyle= {top: `${175 * (clientWidth / 375) * i}px`}
                                        return <View style={linkStyle} className="product-link" key={key} onClick={this.gotoDetail}></View>
                                    })
                                }
                            </View>
                        </View>
                    ))
                }
            </View>
        )
    }
}